<template>
	<div class="all-body" :style="{ 'background-color': nowColor[nowColorNum - 1] }">
		<div
			class="lxl-body"
			:style="{
				'background-color': nowArticleColor[nowColorNum - 1],
				color: nowColorNum == 5 ? 'rgb(235, 235, 236)' : '',
				'font-size': fontSize + 'px',
			}"
		>
			<!-- 头部，包括文章标题，名称，上传者，时间 -->
			<div class="dashed">
				<!-- 标题 -->
				<h2>{{ detailsInfo.title }}</h2>
				<div>
					<label class="heard_label">题目：</label>
					<span class="heard_span">{{ detailsInfo.title }}</span>
					<label class="heard_label">上传者姓名：</label>
					<span class="heard_span">{{ detailsInfo.uploader }}</span>
					<label class="heard_label">上传时间：</label>
					<span class="heard_span">{{ detailsInfo.addtime }}</span>
				</div>
			</div>
			<!-- 文章部分 -->
			<div class="lxl-middle" v-html="detailsInfo.contents"></div>
			<!-- 底部 -->
		</div>
		<!-- 右侧，功能选择 -->
		<ul class="body-right">
			<li>
				<el-popover placement="left" width="400" v-model="listVisible">
					<div style="text-align: right; margin: 0">
						<span style="font-size: 20px; float: left">目录</span>
						<el-button type="text" icon="el-icon-close" @click="listVisible = false"></el-button>
					</div>
					<div>
						<div v-for="(item, index) in tableData" :key="index">
							<span class="listTitle" @click="changeDetails(item)">{{ item.title }}</span>
						</div>
					</div>
					<el-card slot="reference" class="body-right_card" shadow="never" @click="listVisible = true">
						<div>目录</div>
					</el-card>
				</el-popover>
			</li>
			<li>
				<el-popover placement="left" width="400" v-model="fontVisible">
					<div style="text-align: right; margin: 0">
						<span style="font-size: 20px; float: left">调整字号</span>
						<el-button type="text" icon="el-icon-close" @click="fontVisible = false"></el-button>
					</div>
					<div class="font-body">
						<div @click="fontReduce" class="font-reduce"><Icon size="27" type="logo-yahoo" />-</div>
						<el-divider direction="vertical"></el-divider>
						<span class="font-num">{{ fontSize }}</span>
						<el-divider direction="vertical"></el-divider>
						<div @click="fontAdd" class="font-add"><Icon size="27" type="logo-yahoo" />+</div>
					</div>
					<el-card slot="reference" class="body-right_card" shadow="never" @click="fontVisible = true">
						<div>字体</div>
					</el-card>
				</el-popover>
			</li>
			<li>
				<el-popover placement="left" width="400" v-model="colorVisible">
					<div style="text-align: right; margin: 0">
						<span style="font-size: 20px; float: left">背景颜色</span>
						<el-button type="text" icon="el-icon-close" @click="colorVisible = false"></el-button>
					</div>
					<div style="margin: 40px">
						<el-button
							style="height: 50px; width: 50px; background-color: rgb(224, 224, 224); padding: 16px"
							circle
							:icon="nowColorNum == 1 ? 'el-icon-check' : ''"
							@click="changeColor(1)"
						></el-button>
						<el-button
							style="height: 50px; width: 50px; background-color: rgb(222, 217, 198); padding: 16px"
							circle
							:icon="nowColorNum == 2 ? 'el-icon-check' : ''"
							@click="changeColor(2)"
						></el-button>
						<el-button
							style="height: 50px; width: 50px; background-color: rgb(230, 239, 228); padding: 16px"
							circle
							:icon="nowColorNum == 3 ? 'el-icon-check' : ''"
							@click="changeColor(3)"
						></el-button>
						<el-button
							style="height: 50px; width: 50px; background-color: rgb(246, 239, 239); padding: 16px"
							circle
							:icon="nowColorNum == 4 ? 'el-icon-check' : ''"
							@click="changeColor(4)"
						></el-button>
						<el-button
							style="height: 50px; width: 50px; background-color: rgb(25, 25, 25); padding: 16px"
							circle
							:icon="nowColorNum == 5 ? 'el-icon-sunny' : 'el-icon-moon'"
							@click="changeColor(5)"
						></el-button>
					</div>
					<el-card slot="reference" class="body-right_card" shadow="never" @click="colorVisible = true">
						<div>背景</div>
					</el-card>
				</el-popover>
			</li>
		</ul>
		<el-backtop target=".el-main" :bottom="100">
			<div
				style="
					 {
						height: 100%;
						width: 100%;
						background-color: #f2f5f6;
						box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
						text-align: center;
						line-height: 40px;
						color: #1989fa;
					}
				"
			>
				<i class="el-icon-top"></i>
			</div>
		</el-backtop>

		<!-- 改变背景颜色弹窗 -->
	</div>
</template>

<script>
import { detailsArticles } from '@/api/debateMaterials/recommendArticles/index.js';
export default {
	data() {
		return {
			nowColorNum: 1,
			// 总体颜色
			nowColor: ['rgb(224, 224, 224)', 'rgb(222, 217, 198)', 'rgb(230, 239, 228)', 'rgb(246, 239, 239)', 'rgb(25, 25, 25)'],
			// 文章部分颜色
			nowArticleColor: ['rgb(240, 240, 240)', 'rgb(239, 236, 227)', 'rgb(243, 247, 242)', 'rgb(251, 247, 247)', 'rgb(38, 38, 38)'],
			// 控制修改背景颜色弹窗
			colorVisible: false,
			// 控制字体大小弹窗
			fontVisible: false,
			fontSize: 18,
			detailsId: '',
			detailsInfo: {},
			tableData: [],
			pageInfo: {
				pagenum: 1,
				pagesize: 20,
			},
			total: 0,
		};
	},
	created() {
		this.detailsId = this.$route.query.row;
		this.getDetails();
		// this.getMaterialsInfo();
	},
	methods: {
		// 根据id获取辩论稿
		async getDetails() {
			let res = await detailsArticles(this.detailsId);
			if (res.statusCode === 20000) {
				this.detailsInfo = res.data;
			}
		},

		// 更换
		changeDetails(row) {
			this.detailsId = row.id;
			this.getdetailsInfo();
			// this.getMaterialsInfo()
		},
		changeColor(e) {
			this.nowColorNum = e;
		},
		fontReduce() {
			if (this.fontSize > 11) {
				this.fontSize = this.fontSize - 2;
			} else {
				this.$message.error('已经是最小字体！');
			}
		},
		fontAdd() {
			if (this.fontSize <= 31) {
				this.fontSize = this.fontSize + 2;
			} else {
				this.$message.error('已经是最大字体！');
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.all-body {
	height: 100%;
}
.lxl-body {
	height: 100%;
	width: 83%;
	overflow: scroll;
	margin-left: 8%;
	text-indent: 2em;
	display: inline-block;
}
.dashed {
	margin-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: dashed 1px rgb(178, 178, 178);
	//   height: 53px;
	text-align: center;
}
.body-right {
	float: right;
	margin-top: 200px;
	margin-right: 20px;
	list-style: none;
}
.heard_label {
	color: rgb(178, 178, 178);
	margin-left: 120px;
	font-size: 13px;
}
.heard_span {
	color: rgb(87, 90, 81);
	font-size: 15px;
}
.lxl-middle {
	width: 96%;
	margin-left: 2%;
	height: 450px;
}
.body-right_card {
	width: 85px;
	height: 85px;
	margin-top: 10px;
	text-align: center;
}
.body-right_card:hover {
	color: rgb(64, 158, 255);
}
.lxl-footer {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 20px;
}
.lxl-footer_btn {
	width: 220px;
	margin-right: 150px;
	margin-left: 250px;
}
.font-body {
	margin-left: 10%;
	width: 80%;
	height: 50px;
	border: 1px solid #d9d9d9;
}
.font-reduce {
	// float: left;
	display: inline-block;
	width: 23%;
	margin-left: 15px;
	margin-top: 10px;
}
.font-reduce:hover {
	color: rgb(64, 158, 255);
}
.font-add {
	width: 23%;
	display: inline-block;
	// margin-left: 10px;
}
.font-add:hover {
	color: rgb(64, 158, 255);
}
.font-num {
	width: 23%;
	font-size: 18px;
	margin-left: 40px;
	margin-right: 40px;
}
.listTitle {
	cursor: pointer;
}
.listTitle:hover {
	color: rgb(73, 204, 144);
}
</style>